<template>
  <div id="index" ref="appRef">
    <div class="bg">

      <dv-loading v-if="loading">Loading...</dv-loading>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu>
          <!--菜单组件menu-item-->
          <menu-item v-for="(router, key) in menulist" :key="key" :item="router"/>
        </el-menu>
      </el-scrollbar>
      <div class="admin-wrapper">
          <div class="sidebar-container">
              <!--左侧菜单-->
          </div>
          <div class="main-container">
              <div class="header-main">
                  <!--顶部菜单-->
              </div>
            <!--内容区域-->
          </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      mockMenuData: [
        {id: '1', level: 1, name: '菜单A', parentId: '0', path: ''},
        {
          id: '2', level: 1, name: '菜单B', parentId: 0, path: '/yjcd',
          children: [
            {id: '2_1', level: 2, name: '菜单B_A', parentId: '1', path: ''},
            {id: '2_2', level: 2, name: '菜单B_B', parentId: '1', path: ''},
            {
              id: '2_3', level: 2, name: '菜单B_C', parentId: '1', path: '',
              children: [
                {id: '2_1_1', level: 2, name: '菜单B_C_A', parentId: '2', path: ''},
                {id: '2_1_1', level: 2, name: '菜单B_C_B', parentId: '2', path: ''},
                {id: '2_1_1', level: 2, name: '菜单B_C_C', parentId: '2', path: ''}
              ]
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.cancelLoading()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
</style>
